<!--
无限报警统计charts子组件
wireless-bar
-->
<template>
    <div class="wireless-bar">
        <div class="wireless-bar-title">
            {{ title }}
        </div>
        <div class="wireless-bar-chart">
            <chart
            :chartId="chartId"
            :options="wirelessChartOption"></chart>
        </div>
    </div>
</template>

<script>
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'wireless-bar',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    props: {
        // echart-id
        chartId: {
            type: String,
        },
        // 标题
        title: {
            type: String,
            default: '标题',
        },
        // 图表数据
        chartData: {
            type: Object,
            default() {
                return {
                    yAxisData: [],
                    xAxisData: [],
                };
            },
        },
    },
    computed: {
        // 无限报警统计charts配置
        wirelessChartOption() {
            const {
                size01,
            } = this;
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    textStyle: {
                        fontSize: 14 * size01,
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '2%',
                    containLabel: true,
                    show: true,
                    borderColor: '#18498e',
                // backgroundColor: '#f40',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chartData.xAxisData, // ['Mon', 'Tue', 'Wed', 'Thu'],
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#fff',
                            rotate: -45,
                            fontSize: 12 * size01,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#18498e',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#18498e',
                                width: 1 * size01,
                            },
                        },
                    },

                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        // barWidth: 28,
                        itemStyle: {
                            borderRadius: [14 * size01, 14 * size01, 0, 0],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#3294FF' },
                                { offset: 1, color: 'rgba(23,91,255,0.18)' },
                            ]),
                        },
                        label: {
                            show: false,
                            position: 'inside',
                            color: '#fff',
                        },
                        data: this.chartData.yAxisData, // [334, 390, 330, 220],
                    },
                ],
            };
        },
    },
};
</script>
<style lang='scss' scoped>
.wireless-bar {
    width: 100%;
    height: 100%;
    overflow: hidden;

    &-title {
        width: 100%;
        height: .667rem;
        box-sizing: border-box;
        font-size: .3889rem /* 14/80 */;
        padding-left: .44rem;
        line-height: .667rem;
        color: #00A5FF;
    }

    &-chart {
        width: 100%;
        height: calc(100% - .667rem);
    }
}
</style>
